<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="__PUBLIC__/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <!-- 当前文件定制 -->
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css"> -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/cropper/cropper.min.css">
    <include file="layout/footer" />
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/umeditor/lang/zh-cn/zh-cn.js"></script>
    <script src="__PUBLIC__/plugins/cropper/cropper.js"></script>
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
    <style type="text/css">
    h1 {
        font-family: "微软雅黑";
        font-weight: normal;
    }
    
    img {
        max-width: 100%;
    }

    .item {
        position: relative;
    }
    
    .item .del {
        position: relative;
        top: 5px;
    }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="普通会员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    商家信息设置
                    <small>添加商品信息</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">商家中心</a></li>
                    <li class="active">商家设置</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <form id="form" action="__APP__/home/storekeeper/good/submit" method="post" enctype="multipart/form-data">
                    <!--   set profile picture 设置头像 -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title">商品信息</h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label for="goodname">商品名</label>
                                            <input required type="text" class="newpwd form-control" name="goodname" placeholder="商品名">
                                        </div>
                                        <div class="form-group">
                                            <label for="place">发货地</label>
                                            <input required type="text" class="newpwd form-control" name="place" placeholder="发货地">
                                        </div>
                                        <div class="form-group">
                                            <label for="expressplace">产地</label>
                                            <input required type="text" class="newpwd form-control" name="expressplace" placeholder="产地">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label>商品大类</label>
                                            <select class="form-control big-class" name="type">
                                                <option value="蔬菜水果">蔬菜水果</option>
                                                <option value="餐饮服务">餐饮服务</option>
                                                <option value="鸡蛋生擒">鸡蛋生擒</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>商品小类</label>
                                            <select class="form-control small-class" name="subtype">
                                                <option value="蔬菜">蔬菜</option>
                                                <option value="水果">水果</option>
                                                <option value="菌类">菌类</option>
                                                <option value="瓜果">瓜果</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xs-12">
                                        <div class="form-group">
                                            <label for="desc">商品描述</label>
                                            <textarea required type="text" class="newpwd form-control" name="desc" placeholder="商品描述"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.box-body -->
                                <div class="overlay hidden">
                                    <i class="fa fa-refresh fa-spin"></i>
                                </div>
                                <!-- /.box -->
                            </div>
                            <div class="box box-default">
                                <div class="box-header">
                                    <h3 class="box-title">选择商品图片</h3>
                                    <span class="notice-info"> (最多可以添加5张图片，至少一张)</span>
                                </div>
                                <div class="box-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-10 showpic">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <label title="Upload image file" class="btn btn-primary btn-upload" for="inputImage">
                                        <span id="addPic" title="" class="docs-tooltip" data-original-title="从本机添加图片" data-toggle="tooltip">添加图片</span>
                                    </label>
                                </div>
                            </div>
                            <div class="box box-default">
                                <div class="box-header">
                                    <h3 class="box-title">添加产品规格</h3>
                                    <span class="item-info"> (最多可以添加10种规格)</span>
                                    <!-- <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool"><i class="fa fa-plus"></i></button>
                                    </div> -->
                                </div>
                                <div class="box-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="container-fluid">
                                                <div class="col-md-8">
                                                    <table class="table">
                                                        <tbody>
                                                            <tr>
                                                                <th class="col-md-4">规格名</th>
                                                                <th class="col-md-4">价格(¥/元)</th>
                                                                <th class="col-md-4"></th>
                                                            </tr>
                                                            <tr class="tdrow">
                                                                <td>
                                                                    <input required type="text" class="form-control" name="itemname[]" placeholder="规格名">
                                                                </td>
                                                                <td>
                                                                    <input required type="text" class="form-control" name="price[]" placeholder="价格">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="itemdel btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i></button>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <label title="Upload image file" class="btn btn-primary btn-upload" for="inputImage">
                                        <span id="addItem" title="">添加规格</span>
                                    </label>
                                </div>
                            </div>
                            <div class="box box-default">
                                <div class="box-header">
                                    <h3 class="box-title">商品详情</h3>
                                    <!-- <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool"><i class="fa fa-plus"></i></button>
                                    </div> -->
                                </div>
                                <div class="box-body">
                                    <div>
                                        <script type="text/plain" id="myEditor" name="detail" style="width:100%;height:300px;">
                                            <p>在这添加图文描述</p>
                                        </script>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- box -->
                            <button id="submitinfo" type="button" class="btn btn-primary">提交商品信息</button>
                        </div>
                    </div>
                </form>
                <!--   ./set profile picture 设置头像 -->
            </section>
            <!-- /.content -->
        </div>
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">裁剪图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <img id="image" src="__PUBLIC__/pictures/1.jpg" class="img-responsive" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="prebtn" class="btn btn-primary">确认裁剪</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <!-- /.content-wrapper -->
        <include file="layout/copyright" />
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <!-- AdminLTE App -->
    <!-- AdminLTE for demo purposes -->
    <!-- Page script -->
    <script>
    $(function() {
        var um = UM.getEditor('myEditor', {
            /* 传入配置参数,可配参数列表看umeditor.config.js */
            imageUrl: "__APP__/Home/PublicAction/Notice/uploadImg" //图片上传提交地址
                ,
            imagePath: "__ROOT__/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
                ,
            imageFieldName: "upfile",
            toolbar: [
                'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
                'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
                '| justifyleft justifycenter justifyright justifyjustify |',
                'link unlink | emotion image video',
                '| horizontal print preview', 'drafts', 'formula'
            ]
        });

        um.addListener('blur', function() {
            $('#focush2').html('编辑器失去焦点了')
        });
        um.addListener('focus', function() {
            $('#focush2').html('')
        });
        //按钮的操作

    });

    $(function() {


        //图像裁剪
        $image = $('#image');
        var cropBoxData, canvasData;

        $('#myModal').on('shown.bs.modal', function() {
            $image.cropper({
                aspectRatio: 1,
                viewMode: 3,
                built: function() {
                    $image.cropper('setCanvasData', canvasData);
                    // $image.cropper('setCropBoxData',cropBoxData);
                }
            });
        }).on('hidden.bs.modal', function() {
            cropBoxData = $image.cropper('getCropBoxData');
            canvasData = $image.cropper('getCanvasData');
            $image.cropper('destroy');
        })

        // Import image添加图片
        var $inputImage = $('.inputImage');
        var URL = window.URL || window.webkitURL;
        var blobURL;

        if (URL) {
            $('body').delegate(':file', 'change', (function() {
                var files = this.files;
                var file;

                // if (!$image.data('cropper')) {
                //     return;
                // }

                if (files && files.length > 0) {
                    file = files[0];

                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        // $image.one('built.cropper', function() {
                        //     // Revoke when load complete
                        //     URL.revokeObjectURL(blobURL);
                        // }).cropper('replace', blobURL);
                        $image.prop('src', blobURL);
                        $('.item:last').removeClass('unadd');
                        if (($('.item').size() - $('.unadd').size()) == 5) {
                            $('#addPic').parent().addClass('disabled');
                        }
                        $('.notice-info').html('(最多可以添加5张图片，已经添加' + ($('.item').size() - $('.unadd').size()) + '张)');
                        $('#myModal').modal('show');
                        $image.one('built.cropper', function() {
                            // Revoke when load complete
                            URL.revokeObjectURL(blobURL);
                        });
                        // $inputImage.val('');
                    } else {
                        window.alert('请选择图像文件.');
                    }
                } else {

                }
            }));
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }
        //添加图片
        $('#prebtn').click(function() {
            var result = $image.cropper('getCroppedCanvas', {
                width: 300,
                height: 300
            });
            var cropInfo = $image.cropper('getData');
            $('.item:last img').prop('src', result.toDataURL('img/jpeg')).removeClass('hidden');
            console.log(cropInfo);
            $('.item:last input:first').val(JSON.stringify(cropInfo));
            $('.item:last .del').removeClass('hidden');
            $('#myModal').modal('hide');
        });

        $('body').delegate('.del', 'click', function() {
            $(this).parent().remove();
            $('.notice-info').html('(最多可以添加5张图片，已经添加' + ($('.item').size() - $('.unadd').size()) + '张)');
            if (($('.item').size() - $('.unadd').size()) < 5) {
                $('#addPic').parent().removeClass('disabled');
            }
        });

        $('#addPic').click(function() {
            $('.unadd').remove();
            if (($('.item').size() - $('.unadd').size()) == 5) {
                $('#addPic').parent().addClass('disabled');
            } else {
                var input_pic = document.createElement('input');
                $(input_pic).prop('accept', "image/*").prop('type', 'file').prop('name', 'file[]').addClass('inputImage').css('display', 'none');
                var img = document.createElement('img');
                var div = document.createElement('div');
                var input = document.createElement('input');
                var btn = document.createElement('button');
                $(btn).addClass('del btn btn-danger btn-block btn-xs hidden').attr('type', 'button').html('<i class="glyphicon glyphicon-trash"></i>');
                $(input).prop('type', 'hidden').prop('name', 'cropinfo[]');
                $(div).addClass("col-md-2").addClass("item unadd");
                $(img).addClass("img-thumbnail docs-tooltip").addClass('hidden').attr("data-original-title", "点击更换图片").attr('data-toggle', 'tooltip').attr('style', 'cursor:pointer');
                $(div).append(img).append(input).append(input_pic).append(btn);
                $('.showpic').append(div);
                $(input_pic).trigger('click');
                if (($('.item').size() - $('.unadd').size()) == 5) {
                    $('#addPic').parent().addClass('disabled');
                }
            }
        });

        $('body').delegate('.item img', 'click', function() {
            $(this).parent().find(':file').click();
        })

        //添加规格
        $('#addItem').click(function() {
            if ($('.tdrow').size() < 10) {
                $('.tdrow').last().after($('.tdrow').first().prop('outerHTML'));
                $('.item-info').html('(最多可以添加10个规格，已经添加' + ($('.tdrow').size()) + '个)');
                if ($('.tdrow').size() == 10) $('#addItem').parent().addClass('disabled');
            }
        });
        $('body').delegate('.itemdel', 'click', function() {
            var button = $(this);

            if ($('.tdrow').size() > 1)
                button.parent().parent().remove();
            $('.item-info').html('(最多可以添加10个规格，已经添加' + ($('.tdrow').size()) + '个)');
            if ($('.tdrow').size() < 10) {
                $('#addItem').parent().removeClass('disabled');
            }
        })


        //提交表单
        $('#submitinfo').click(function() {
            if (($('.item').size() - $('.unadd').size()) < 1) {

            } else {
                $('#form').submit();
            }
        });
    });
    </script>
</body>

</html>